<template>
  <div class="vt-md flex js-sp">
    <el-input
      v-model="vcode"
      @change="inputCode"
      :placeholder="$t('register.codeTip')"
    ></el-input>
    <div
      @click="getCode"
      class="send-btn login-btn radius share-color point text-ellipsis"
      :class="isDisable ? 'secondary-bg' : ''"
      :disabled="isDisable"
    >
      {{ isDisable ? $t("register.sendCode") : `${count}S` }}
    </div>
  </div>
</template>

<script>
import {
  phoneCode,
  emailCode,
  checkPhoneCode,
  checkEmailCode,
} from "@/api/user";
import { phoneRule, emailRule, passwordRule } from "@/utils/formValidation";
import { ElMessage } from "element-plus";
import { PhoneNumberUtil } from "google-libphonenumber";
import countrys from "@/utils/country.js";
import { toBeNumber } from "@/utils/common";

export default {
  name: "SendCode",
  props: {
    param: Object,
    fond: Number, //1手机 2邮箱
  },
  emits: ["getKey", "inputCode"],
  data() {
    return {
      timer: null,
      isDisable: true, //是否可以点击发送验证码
      count: 60,
      vcode: "",
      requestFun: null,
    };
  },
  methods: {
    getCode() {
      if (!this.isDisable) {
        return;
      }
      let param = {};
      if (this.param.type === "find" || this.param.type === "bind") {
        param = this.find();
      } else if (this.param.type === "register") {
        param = this.register();
      } else if (this.param.type === "check") {
        param = this.check();
      }
      if (!param.phone_number && !param.email && !param.user_password) {
        return;
      }
      if (param.phone_number) {
        if (param.area_code != "+1809") {
          if (!phoneRule.reg.test(param.phone_number)) {
            ElMessage.error(phoneRule.message);
            return;
          } else {
            const phoneUtil = PhoneNumberUtil.getInstance();
            let flag = countrys.filter((item) => {
              return item["area_code"] === param.area_code;
            });
            const number = phoneUtil.parseAndKeepRawInput(
              param.phone_number,
              flag[0].flag.toUpperCase()
            );
            const isValite = phoneUtil.isValidNumber(number);
            if (!isValite) {
              ElMessage.error(phoneRule.message);
              return false;
            }
          }
        } else {
          if (toBeNumber(param.phone_number).length != 7) {
            ElMessage.error(phoneRule.message);
            return;
          }
        }
      }
      if (param.email) {
        if (!emailRule.reg.test(param.email)) {
          ElMessage.error(emailRule.message);
          return;
        }
      }
      if (param.user_password) {
        if (!passwordRule.reg.test(param.user_password)) {
          ElMessage.error(passwordRule.message);
          return;
        }
      }
      this.requestFun(param)
        .then((res) => {
          if (res.code === 200) {
            this.$emit("getKey", res.data.key);
            this.countDown();
            ElMessage.success(this.$t("formTip.sendsuccess"));
          }
        })
        .catch((err) => {
          console.log("err", err);
          ElMessage.error(err.message);
        });
    },
    // 找回密码校验
    find() {
      let param = {};
      if (this.param.user_phone_number && this.fond === 1) {
        this.requestFun = phoneCode;
        param = {
          phone_number: this.param.user_phone_number,
          area_code: this.param.user_area_code,
          type: this.param.type,
        };
      } else if (this.param.user_email && this.fond === 2) {
        this.requestFun = emailCode;
        param = {
          email: this.param.user_email,
          type: this.param.type,
        };
      }
      return param;
    },
    // 注册获取安全校验码
    register() {
      let param = this.param;
      if (param.phone_number) {
        this.requestFun = phoneCode;
      } else if (param.email) {
        this.requestFun = emailCode;
      }
      return param;
    },
    // 绑定安全验证获取验证码
    check() {
      let param = this.param;
      if (this.fond === 1) {
        this.requestFun = checkPhoneCode;
      } else {
        this.requestFun = checkEmailCode;
      }
      return param;
    },
    //重置
    reset() {
      if (this.timer) {
        clearTimeout(this.timer);
        this.timer = null;
      }
      this.isDisable = true;
      this.count = 60;
    },
    countDown() {
      this.count--;
      this.isDisable = false;
      if (this.count === 0) {
        this.isDisable = true;
        this.count = 60;
        return;
      }
      this.timer = setTimeout(() => {
        this.countDown();
      }, 1000);
    },
    inputCode(value) {
      this.$emit("inputCode", value);
    },
  },
};
</script>
<style lang="less" scoped>
.send-btn {
  height: 42px;
  min-width: 106px;
  padding: 0px 10px;
  box-sizing: border-box;
  line-height: 42px;
  margin-inline-start: 14px;
}
</style>
